<template>
  <el-dialog v-model="show" :title="editData ? '编辑' : '新增'" width=" 30%">
    <el-form ref="ruleFormRef" :model="fromData" label-width="120px" status-icon>
      <el-form-item label="id" prop="id" v-show="editData">
        <el-input v-model="fromData.id" />
      </el-form-item>
      <el-form-item label="图片" prop="url">
        <el-input v-model="fromData.url" />
      </el-form-item>
      <el-form-item label="小区名称" prop="name">
        <el-input v-model="fromData.name" />
      </el-form-item>
      <el-form-item label="小区描述" prop="title">
        <el-input v-model="fromData.title" />
      </el-form-item>
      <el-form-item label="房屋大小" prop="size">
        <el-input v-model="fromData.size" />
      </el-form-item>
      <el-form-item label="房屋价格" prop="price">
        <el-input v-model="fromData.price" />
      </el-form-item>
      <el-form-item label="户主" prop="person">
        <el-input v-model="fromData.person" />
      </el-form-item>
      <el-form-item label="状态" prop="state">
        <el-input v-model="fromData.state" />
      </el-form-item>
      <el-form-item label="装修程度" prop="level">
        <el-select v-model="fromData.level" style="width: 240px">
          <el-option value="毛胚" />
          <el-option value="精装" />
          <el-option value="简装" />
        </el-select>
      </el-form-item>
      <el-form-item label="户型" prop="sizeRoom">
        <el-select v-model="fromData.sizeRoom" style="width: 240px">
          <el-option value="一居" />
          <el-option value="二局" />
          <el-option value="三局" />
        </el-select>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="acncleHandler">取消</el-button>
        <el-button type="primary" @click="confirmHandler">
          {{ editData ? '保存' : '添加' }}
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script setup>
import { ref, reactive, onUpdated } from 'vue';
const show = defineModel({ required: true })
const props = defineProps(['editData'])
const emits = defineEmits(['add', 'edit'])
const fromData = reactive({
  id: "",
  url: "",
  name: "",
  title: "",
  size: "",
  price: "",
  person: "",
  state: "",
  level: "",
  sizeRoom: "",
})
onUpdated(() => {
  if (props.editData) {
    Object.assign(fromData, props.editData)
  } else {
    for (var key in fromData) {
      fromData[key] = ""
    }
  }
})
// 点击取消按钮
function acncleHandler() {
  for (var key in fromData) {
    fromData[key] = ""
  }
  show.value = false
}
// 确认按钮
function confirmHandler() {
  if (props.editData) {
    emits('edit', fromData)
  } else {
    emits('add', fromData)
  }
  acncleHandler()
}
</script>
<style scoped></style>
